
import { CloudUploadOutlined, PaperClipOutlined, SendOutlined } from '@ant-design/icons';
import { Attachments, Sender } from '@ant-design/x';
import { Badge, Button } from 'antd';
import React from 'react';
import { createStyles, useResponsive } from 'antd-style';



const AttachmentInput = ({ styles, onSubmit, agent, content, setContent, loading, setLoading, onCancel }) => {
  const [headerOpen, setHeaderOpen] = React.useState(false);
  const [attachedFiles, setAttachedFiles] = React.useState([]);
  const senderRef = React.useRef(null);
  

  // 获取响应式断点状态
const responsive = useResponsive(); // { mobile: boolean, tablet: boolean, desktop: boolean }
  
// 使用示例
const isMobile = responsive.mobile; // 判断是否是移动端

  const attachmentsNode = (
    <Badge dot={attachedFiles.length > 0 && !headerOpen}>
      <Button type="text" icon={<PaperClipOutlined />} onClick={() => setHeaderOpen(!headerOpen)} />
    </Badge>
  );

  const senderHeader = (
    <Sender.Header
      title="附件"
      open={headerOpen}
      onOpenChange={setHeaderOpen}
      styles={{
        content: {
          padding: 0,
        },
      }}
    >
      <Attachments
        // Mock not real upload file
        beforeUpload={() => false}
        items={attachedFiles}
        onChange={({ fileList }) => setAttachedFiles(fileList)}
        placeholder={(type) =>
          type === 'drop'
            ? {
                title: 'Drop file here',
              }
            : {
                icon: <CloudUploadOutlined />,
                title: 'Upload files',
                description: 'Click or drag files to this area to upload',
              }
        }
        // getDropContainer={() => senderRef.current}
      />
    </Sender.Header>
  );
  // const SendButton = () => (
  //   <Button
  //     type="primary"
  //     shape="circle"
  //     icon={<SendOutlined />}
  //     size="large"
  //     style={{
  //       minWidth: 40,
  //       height: 40,
  //       '@media (max-width: 768px)': {
  //         minWidth: 36,
  //         height: 36
  //       }
  //     }}
  //   />
  // );

  return (
    <Sender
      className=""
      ref={senderRef}
      // header={senderHeader} // 附件组件
      // prefix={attachmentsNode}  // 附件图标
      value={content}
      onChange={setContent}
      // defaultValue="欢迎咨询" // 初始值
      allowSpeech={false}  // 开启语音输入
      onSubmit={onSubmit}
      loading={loading}
      onCancel={onCancel} // 传递 onCancel 回调
      placeholder=""
      icon={<SendOutlined />}
      shape="round"
      style={{
        borderRadius: 12,
        boxShadow: 'none', // 移除阴影避免重复
        // border: `1px solid ${createStyles.token.colorBorder}`,
        // background: token.colorBgContainer,
      }}
      inputStyle={{
        padding: isMobile ? '8px 12px' : '12px 16px',
        fontSize: isMobile ? 14 : 16,
      }}
    />
  );
};

export default AttachmentInput;